<template>
  <button 
    class="media-button" 
    :class="{ active, error }"
    @click="$emit('click')"
  >
    <div class="button-content">
      <i :class="['fas', `fa-${icon}`]"></i>
      <span>{{ label }}</span>
      <span class="status-indicator" :class="statusClass"></span>
    </div>
    <span class="button-label">{{ active ? '停止' : '开始' }}</span>
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      required: true,
      validator: value => ['audio', 'video', 'screen'].includes(value)
    },
    active: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    status: {
      type: String,
      default: 'idle'
    }
  },
  
  computed: {
    error() {
      return this.status === 'error';
    },
    statusClass() {
      const statusMap = {
        idle: '',
        active: 'active',
        error: 'error'
      };
      return statusMap[this.status] || '';
    }
  }
};
</script>

<style scoped>
.media-button {
  position: relative;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #3498db;
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.media-button:hover:not(:disabled) {
  background: #2980b9;
  transform: translateY(-2px);
}

.media-button.active {
  background: #2ecc71;
}

.media-button.error {
  background: #f39c12;
}

.button-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #a0aec0;
}

.status-indicator.active {
  background: #2ecc71;
}

.status-indicator.error {
  background: #e74c3c;
}

.button-label {
  position: absolute;
  right: 15px;
  font-size: 0.9rem;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .media-button {
    flex-direction: column;
    text-align: center;
  }
  
  .button-label {
    position: static;
    margin-top: 5px;
  }
}
</style>